<template>
	<view class="">
		
			<view class="comment-content">
				<view v-if="commentList.length>0" class="comment-content-cccc">
				<view class="" v-for="(item, i) in commentList" :key="i">
					<comment-box :item="item" @reply="reply"></comment-box>
				</view>
				
				<uni-load-more v-if="commentList.length === 0 || commentList.length > 8"  iconType="snow" :status="loading"></uni-load-more>
				</view>
					<view v-else class="comment-content-nolist">
						暂无评论，请发表您的看法...
					</view>
			</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<view class="popup-content">
					<textarea class="uni-input" cursor-spacing="45" auto-focus style="" rows="1" v-model="detailTex" fixed maxlength="50" placeholder="我来说两句" />
				
				<view class="popup-bottom">
					<view class="popup-bottom-icons">
						
						<!-- <uni-icons type="chat" size="22" color="#333"></uni-icons>detail_params.is_thumbs_up -->
					</view>
					<view class="popup-bottom-right">
						<view class="popup-count">
							{{ detailTex.length}} / 50
						</view>
						<view  @click="subimt" class="popup-but" :class="detailTex.length<1 ? 'but_disable' : ''">
							发表
						</view>
					</view>
				</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				loading:'loading',
				commentList:[],
				page:1,
				paggesize:8,
				replyFormData:{},
				detailTex:'',
				article_id:','
			};
		},
		computed: {
			...mapState(['user_id'])
		},
		onReachBottom() {
			this.page++
			console.log("上拉到底部");
			this.get_comments(this.article_id)
		},
		onLoad(query) {
			this.article_id = query.id
			console.log(query,111111);
			this.get_comments(query.id)
		},
		methods:{
			openText(){
				this.$refs.popup.open()
			},
			subimt(){
				if(!(this.detailTex.trim())) return uni.showToast({
					title:"请输入评论内容",
					icon:"none"
				})
				this.get_comment({content: this.detailTex, ...this.replyFormData})
			},
			reply(e){
				this.replyFormData = {
					comment_id: e.item.comment_id,
					isReply: e.isReply
				}
				if(e.item.reply_id){
					this.replyFormData.reply_id = e.item.reply_id
				}
				this.openText();
				// console.log(this.replyFormData,"ee");
			},
			async get_comment(content) {
				uni.showLoading()
				const formData = {
					article_id:this.article_id,
					user_id: this.user_id,
					...content
				}
				this.$refs.popup.close()
				let commentRes = await this.$api.get_comment(formData)
				if (!commentRes) return false;
				uni.hideLoading()
				
				this.get_comments(this.article_id)
				uni.showToast({
					title:"评论成功",
					icon:"none"
				})
				this.detailTex = ''
				this.replyFormData ={}
				// console.log(commentRes);
			},
			async get_comments(article_id) {
				// uni.showLoading()
				let commentRes = await this.$api.get_comments({
					article_id,
					page:this.page,
					paggesize:this.paggesize,
					user_id: this.user_id,
				})
				if (!commentRes || commentRes.length===0 ) {this.loading = "noMore"; return false }
				const oldComments = JSON.parse(JSON.stringify(this.commentList))
				oldComments.push(...commentRes)
				this.commentList = oldComments
				console.log(commentRes);
			},
		}
	}
</script>

<style scoped lang="scss">

		.comment-content{
			padding: 0 15px;
			margin-bottom: 20px;
			.comment-content-cccc{
				width: 100%;
			}
			.comment-content-nolist{
				text-align: center;
				color: #ccc;
			}
		}
	.popup-wrap{
		background-color: #fff;
		padding: 15px 15px 10px;
		box-sizing: border-box;
		.popup-content{
			// position: relative;
			width: 100%;
			box-sizing: border-box;
			textarea{
				
				height: 80px;
				box-sizing: border-box;
				width: 100%;
				padding: 10px;
				border-radius: 10px;
				background-color: #f5f5f5;
				// position: absolute;
				margin-bottom: 10px;
			}
			
		}
		.popup-bottom{
			// position: absolute;
			width: 100%;
			// bottom: 5px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			.popup-bottom-right{
				display: flex;
				align-items: center;
				.popup-count{
					margin-right: 15px;
					font-size: 12px;
					color: #999;
				}
				.popup-but{
					background-color: $my-bg-color;
					color: #fff;
					vertical-align: middle;
					padding: 0px 15px;
					border-radius: 15px;
				}
				.but_disable{
					opacity: 0.5;
				}
			}
		}
	}
</style>
